<template>
	<view class="container">
		<view class="upload-section">
			<text>请上传正面照：</text>
			<button @click="uploadFront">选择文件</button>
			<image v-if="frontUrl" class="preview-img" :src="frontUrl" mode="widthFix"></image>
		</view>
		<view class="upload-section">
			<text>请上传反面照：</text>
			<button @click="uploadBack">选择文件</button>
			<image v-if="backUrl" class="preview-img" :src="backUrl" mode="widthFix"></image>
		</view>
		<button @click="submitIDCard">提交身份证</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				frontUrl: '', // 身份证正面照片URL  
				backUrl: '', // 身份证反面照片URL  ,
				data: [{
					name: "娃哈哈",
					sex: "男",
					group: "汉族",
					num: '141002************',
				}]

			};
		},
		methods: {
			// 选择并上传身份证正面照片  
			uploadFront() {
				uni.chooseImage({
					count: 1, // 默认9，设置为1表示只上传一张  
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  
					success: (res) => {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片  
						this.frontUrl = res.tempFilePaths[0];
					}
				});
			},
			// 选择并上传身份证反面照片  
			uploadBack() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.backUrl = res.tempFilePaths[0];
					}
				});
			},
			// 提交身份证信息（此处为示例，实际可能发送到服务器）  
			submitIDCard() {
				uni.setStorageSync('list', JSON.stringify(this.data))
				uni.reLaunch({
					url: "/pages/Bind/Bind"
				})

			}
		}
	};
</script>

<style>
	.container {
		padding: 20px;
	}

	.upload-section {
		margin-bottom: 20px;
	}

	.preview-img {
		width: 100%;
		height: 200px;
		/* 可调整 */
	}
</style>